<template>
    <div class="detail-frame">
      <div class="model">
        <div class="detail-info">
          <div class="detail-box">
            <div class="left-info-img">
              <img :src="this.detailInfoBox.infoBoxDetailImg[0]+'_750x1000.v1cAC.81.jpg'" alt="">
            </div>
            <div class="right-info-infomation">
              <h2>{{ detailInfoBox.infoBoxItemTitle }}</h2>
              <div class="price-recommend-sale">
                <div class="price"><h3>{{ detailInfoBox.infoBoxItemCollect }}积分</h3></div>
              </div>
              <div class="choice">
                <table>
                  <tr id="infobox-inside-buy-button">
                    <td>
                    </td>
                    <td>
                      <button class="btn buy-now" @click="tzdh()">立即兑换</button>
                      <button class="btn shop-car-add" @click="add()">加入购物车</button>
                      <button class="btn collect-add" @click="addsc()">收藏</button>
                    </td>
                  </tr>    
                </table>
              </div>
            </div>
          </div>
        </div>
        <div class="goods-detail">
          <div class="goods-detail-middle">
            <div class="goods-show">
              <div class="goods-detail-img-show">
                <div class="title">
                  <h2>穿着效果</h2>
                </div>
                <img v-for="img in detailGoodsDetail.detailGoodsShowImg" :src="img" :alt="img" :key="img.id">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
<script>
import {networkDetailInfo} from '@/request/api';
import { mapState,mapMutations,mapActions} from 'vuex';  
  export default {   
    // eslint-disable-next-line vue/multi-word-component-names
    name: "detail",
    components: {
      
    },
    data() {
      return {
        detailData: {},
        detailNavList: [],
        detailInfoBox: {
          infoBoxDetailImg: [],
          infoBoxItemTitle: null,
          infoBoxItemPrice: null,
          infoBoxItemGoodsSales: null,
          infoBoxItemCommonTotal: null,
          infoBoxItemColor: [],
          infoBoxItemLabel: [],
          infoBoxItemServices: [],
          infoBoxItemCollect: null,
          infoBoxItemShare: null,
          id: this.$route.params.index,
          index: this.$route.params.id
        },
        detailStoreInfo: {
          storeTitle: null,
          storeLog: null,
        },
        detailGoodsDetail: {
          detailGoodsDes: null,
          detailGoodsParam: [],
          detailGoodsShowImg: [],
        }
      }
    },
    created() {
      this.detailGetparam()
    },
    computed: {
      ...mapState({
        isLogined:state=>state.loginzt.isLogined,
      })
    },
    methods: {
      ...mapMutations({
        additem:"gwc/additem",
        changegwc:"gwc/changegwc",
        scadditem:"gsc/additem",
        changegsc:"gsc/changegsc",
        changeisshowlogin:"login/changeisshowlogin",
      }),
      ...mapActions({
        asyncChangeIsShowToast:"logintoast/asyncChangeIsShowToast"
      }),
      add(){
        if( !this.isLogined ){
          this.changeisshowlogin(true)
        }else{
          const aobj = {
            aimga:this.detailInfoBox.infoBoxDetailImg[0],
            atitle:this.detailInfoBox.infoBoxItemTitle,
            acfav:this.detailInfoBox.infoBoxItemCollect,
            atradeItemId:this.detailInfoBox.id,
            atype:this.detailInfoBox.index
          };
          console.log(aobj);
          localStorage.setItem("obj.aimga", aobj.aimga);
          console.log(localStorage.getItem("obj.aimga"));
          localStorage.setItem("obj.atitle", aobj.atitle);
          console.log(localStorage.getItem("obj.atitle"));
          localStorage.setItem("obj.acfav", aobj.acfav);
          console.log(localStorage.getItem("obj.acfav"));
          localStorage.setItem("obj.atradeItemId", aobj.atradeItemId);
          console.log(localStorage.getItem("obj.atradeItemId"));
          localStorage.setItem("obj.atype", aobj.atype);
          console.log(localStorage.getItem("obj.atype"));
          const bobj = {
            bimga:localStorage.getItem("obj.aimga"),
            btitle:localStorage.getItem("obj.atitle"),
            bcfav:localStorage.getItem("obj.acfav"),
            btradeItemId:localStorage.getItem("obj.atradeItemId"),
            btype:localStorage.getItem("obj.atype")
          };
          this.additem(bobj);
          this.changegwc(JSON.parse(localStorage.getItem("bdlist")).length);
          this.asyncChangeIsShowToast({
            msg:"已成功加入购物车",
            type:"success"
          })
        }       
      },
      addsc(){
        if( !this.isLogined ){
          this.changeisshowlogin(true)
        }else{ 
          const sobj = {
            aimga:this.detailInfoBox.infoBoxDetailImg[0],
            atitle:this.detailInfoBox.infoBoxItemTitle,
            acfav:this.detailInfoBox.infoBoxItemCollect,
            atradeItemId:this.detailInfoBox.id,
            atype:this.detailInfoBox.index
          };
          localStorage.setItem("objs.aimga", sobj.aimga);       
          localStorage.setItem("objs.atitle", sobj.atitle);
          localStorage.setItem("objs.acfav", sobj.acfav);
          localStorage.setItem("objs.atradeItemId", sobj.atradeItemId);
          localStorage.setItem("objs.atype", sobj.atype);
          const tobj = {
            bimga:localStorage.getItem("objs.aimga"),
            btitle:localStorage.getItem("objs.atitle"),
            bcfav:localStorage.getItem("objs.acfav"),
            btradeItemId:localStorage.getItem("objs.atradeItemId"),
            btype:localStorage.getItem("objs.atype")
          };
          this.scadditem(tobj);
          this.changegsc(JSON.parse(localStorage.getItem("sclist")).length);
          this.asyncChangeIsShowToast({
            msg:"收藏成功",
            type:"success"
          })
        }      
      },
      tzdh(){
        if( !this.isLogined ){
          this.changeisshowlogin(true)
        }else{
          this.$router.push('/duihuang/' + this.detailInfoBox.infoBoxItemCollect);
        }        
      },
      detailGetparam() {
        const rooterParams = this.$route.params
        const index = rooterParams.id
        const id = rooterParams.index
        this.detailGetDate(index, id)
      },
      detailGetDate(index, id) {
        networkDetailInfo(index, id).then(res => {
          this.detailData = res
          const result = res['0']['_source']['data']['result']
          this.detailNavBar(result)
          this.detailInfoBoxGetDate(result)
          this.detailStoreInfoGet(result)
          this.detailGoodsInfoGet(result)
          window.scrollTo(0,0)
        })
      },
      detailNavBar(res) {
        const infoBoxDetailImg = res['topImages']
        infoBoxDetailImg.forEach(res => {
          this.detailInfoBox.infoBoxDetailImg.push(res)
        })
      },
      detailInfoBoxGetDate(res) {
        this.detailInfoBox.infoBoxItemTitle = res['itemInfo']['title']
        this.detailInfoBox.infoBoxItemPrice = res['itemInfo']['lowPrice']
        try{
           this.detailInfoBox.infoBoxItemCommonTotal = res['rateInfo']['list'].length
        }catch (error){
          console.log(error)
        }
        this.detailInfoBox.infoBoxItemGoodsSales = res['itemInfo']['extra']['sales']
        this.detailInfoBox.infoBoxItemCollect = res['itemInfo']['cFav']
        this.detailInfoBox.infoBoxItemShare = res['rateInfo']['cRate']
        let infoBoxItemColor = res['skuInfo']['props']['0']['list']
        infoBoxItemColor.forEach(item => {
          this.detailInfoBox.infoBoxItemColor.push(item)
        })
        let infoLabel = res['skuInfo']['props']['1']['list']
        infoLabel.forEach(item => {
          this.detailInfoBox.infoBoxItemLabel.push(item)
        })
  
        let infoServer = res['shopInfo']['services']
        infoServer.forEach(item => {
          this.detailInfoBox.infoBoxItemServices.push(item)
        })
        try {
          let infoBoxShopCategory = res['shopInfo']['categories']
          infoBoxShopCategory.forEach(res => {
            this.detailNavList.push(res['name'])
          })
        }catch(error){
          console.log(error)
        }
  
      },
      detailStoreInfoGet(res) {
        let store = this.detailStoreInfo
        store.storeTitle = res['shopInfo']['name']
        store.storeLog = res['shopInfo']['shopLogo']
      },
      detailGoodsInfoGet(res) {
        let goodsInfo = this.detailGoodsDetail
        goodsInfo.detailGoodsDes = res['skuInfo']['title']
        let detailGoodsParam = res['itemParams']['info']['set']
        var paramList_tr_num = 0
        let paramList_td = {}
        let paramList_tr = []
        for (const param in Object.keys(detailGoodsParam)) {
          if (paramList_tr_num < 3) {
            paramList_tr_num++
            paramList_td[Object.keys(detailGoodsParam)[param]] = detailGoodsParam[Object.keys(detailGoodsParam)[param]]
          } else {
            paramList_tr.push(paramList_td)
            this.detailGoodsDetail.detailGoodsParam.push(paramList_tr)
            paramList_tr_num = 0
            paramList_tr = []
            paramList_td = {}
          }
        }
        const detailShowImage = res['detailInfo']['detailImage']['0']['list']
        detailShowImage.forEach(item => {
          goodsInfo.detailGoodsShowImg.push(item + "_750x999.jpg")
        })
  
      }
    },
    activated() {
      this.detailGetparam()
    }
  }
  </script>
  
  <style scoped>
  .detail-frame{
    margin-top:120px;
    margin-left:20px;
    margin-right:30px;
  }
  .left-img img {
    width: 100%;
    height: auto;
    vertical-align: middle;
  }
  
  .detail-box {
    display: flex;
  }
  
  .detail-info {
    margin-top: 20px;
  }
  
  .detail-info:before {
    content: "";
    clear: both
  }
  
  .left-info-img {
    float: left;
    width: 600px;
    height: 520px;
    /* margin-top: 5px; */
  }
  
  .left-info-img img {
    width: 100%;
    height: 520px;
  }
  
  .right-info-infomation {
    float: left;
    font-size: 24px;
    /* margin-top: 5px; */
    box-sizing: border-box;
    padding-left: 40px;
    flex: 1;
    text-align: left; 
  }
  
  .right-info-infomation span {
    font-size: 12px;
    color: rgb(135, 135, 135);
    margin-right: 5px;
  }
  
  .right-info-infomation .price-recommend-sale {
    position: relative;
    height: 32px;
    background-color: rgb(244, 244, 244);
    box-sizing: border-box;
    line-height: 20px;
    padding: 6px;
    margin-top: 20px;
  }
  
  .right-info-infomation .recommon-sale-total {
    float: right;
  }
  
  .right-info-infomation .price {
    font-size: 16px;
    color: var(--mogujie-color);
    text-align: center; 
  }
  
  
  .right-info-infomation .choice {
    width: 100%;
  }
  
  .choice table {
    width: 100%;
    font-size: 14px;
    margin-top: 330px;
  }
  
  .choice table tr {
    display: block;
    box-sizing: border-box;
    padding: 0 0 24px 24px;
  }
  
  .choice table tr td:nth-child(1) {
    font-size: 12px;
    color: rgb(135, 135, 135);
    margin-right: 5px;
    padding-right: 29px;
    box-sizing: border-box;
  }
  table .btn {
    width: 170px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 18px;
    margin-left: 12px;
    outline: none;
    border: none;
    cursor: pointer;
  }
  
  table .buy-now {
    background-color: red;
    color: white;
  }
  
  table .shop-car-add {
    color: black;
    background-color: white;
    box-sizing: border-box;
    border: 1px silver solid;
  }
  table .collect-add{
    color: black;
    background-color: white;
    box-sizing: border-box;
    border: 1px silver solid;
  }
  
  .color-label-box {
    display: block;
    float: left;
    font-size: 8px;
    font-weight: bold;
    padding: 5px;
    line-height: 16px;
    text-align: center;
    color: black;
    border: 2px solid silver;
    margin-right: 4px;
    cursor: pointer;
  }
  
  .color-label-box:hover {
    border: 2px black solid;
  }
  
  #infobox-inside-small-button li {
    display: block;
    float: left;
    margin-left: 12px;
    text-align: center;
  }
  
  #infobox-inside-small-button .btn-capsule {
    padding: 6px 12px;
    font-size: 13px;
    color: silver;
    text-align: center;
    border: 1px silver solid;
    border-radius: 26px;
    cursor: pointer;
  }
  
  #infobox-inside-small-button .btn-capsule:hover {
    border: 1px solid var(--mogujie-color);
  }
  
  #infobox-inside-services img {
    width: 24px;
    height: 24px;
    vertical-align: middle;
    margin-right: 5px;
  }
  
  #infobox-inside-services .services {
    margin-right: 10px;
  }
  
  #infobox-inside-payload .pay {
    background-image: url(https://s10.mogucdn.com/p2/170122/117603130_6a8jgjh899bh5jd6hcia3ehhj0113_221x704.png);
    background-position: -10px -295px;
    background-repeat: no-repeat;
    overflow: hidden;
    display: block;
    width: 131px;
    height: 20px;
  }
  
  .goods-detail-right {
    float: left;
    width: 240px;
    height: 120px;
    box-sizing: border-box;
    border: 1px silver solid;
    padding: 0 20px;
    border-left: none;
  }
  
  .goods-detail-middle {
    margin:0 auto;
    width: 740px;
    box-sizing: border-box;
    border: 1px silver solid;
  }
  
  .goods-detail-left {
    float: left;
    width: 200px;
    height: 120px;
    box-sizing: border-box;
    border: 1px silver solid;
  }
  
  .goods-detail-left .store-title {
    line-height: 60px;
    text-align: center;
    font-size: 18px;
    border-bottom: 1px rgb(244, 244, 244) solid;
    background-color: rgb(244, 244, 244);
  }
  
  .enter-store {
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-sizing: border-box;
    border-top: none;
    height: 60px;
  }
  
  .enter-store a {
    display: block;
    padding: 5px 10px;
    font-size: 14px;
    border: 1px solid rgb(244, 244, 244);
    height: 17px;
  }
  
  .goods-detail-nav-bar {
    height: 58px;
    border-bottom: 1px silver solid;
    background-color: rgb(244, 244, 244);
  }
  
  .goods-detail-nav-bar li {
    box-sizing: border-box;
    height: 58px;
    width: 150px;
    border-top: 2px rgb(244, 244, 244) solid;
    border-right: 1px silver solid;
    line-height: 58px;
    font-size: 16px;
    float: left;
    text-align: center;
  }
  
  .goods-detail-nav-bar .active {
    background-color: white;
    border-top: 2px solid var(--mogujie-color);
    border-bottom: none;
  }
  
  .goods-show {
    margin: 20px 20px 0 20px;
    overflow: hidden;
  }
  
  .goods-show h2 {
    padding-bottom: 5px;
    overflow: hidden;
    float: left;
    font-size: 18px;
    border-bottom: 1px black solid;
  }
  
  .goods-show .title {
    width: 700px;
    height: 40px;
  }
  
  h2:before {
    content: "";
    clear: both;
  }
  
  h2:after {
    content: "";
    clear: both;
  }
  
  .goods-show p {
    font-size: 16px;
  }
  
  .goods-detail-img-show {
    width: 700px;
  }
  
  .goods-detail-img-show img {
    width: 700px;
    height: auto;
  }
  
  .goods-detail-middle .goods-param .param-table {
    box-sizing: border-box;
    width: 698px;
    font-size: 14px;
  }
  
  .goods-detail-middle .goods-param .param-table tr {
    justify-content: space-between;
    border: none !important;
  }
  
  .goods-detail-middle .goods-param .param-table td {
    flex: 1;
    padding: 12px 10px;
  
  }
  
  .goods-detail-middle .goods-param .param-table .param-td {
    display: flex;
  }
  
  .goods-detail-middle .goods-param table {
  
    border-collapse: collapse;
  }
  </style>